<template>
  <div class="bg-light-2 text-dark font-inter min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white border-b border-light-1 flex items-center justify-between px-4 z-10 h-16">
      <div class="container flex px-1 py-3 flex items-center justify-between">
        <!-- 品牌标识 -->
        <div class="flex items-center space-x-3">
          <button id="sidebar-toggle" class="lg:hidden text-gray-300 hover:text-white">
            <i class="fa fa-bars text-xl"></i>
          </button>
          <div class="flex items-center">
            <i class="fa fa-desktop text-primary text-2xl mr-2"></i>
            <h1 class="text-xl font-bold text-white">国粒智能机器人监控台</h1>
          </div>
        </div>
        
        <!-- 时间和状态 -->
        <div class="hidden md:flex items-center space-x-6">
          <div class="flex items-center text-gray-300">
            <i class="fa fa-clock-o mr-2"></i>
            <span id="current-time">{{ currentTime }}</span>
          </div>
          <div class="flex items-center">
            <span class="inline-block w-2 h-2 rounded-full bg-success mr-2 pulse-animation"></span>
            <span class="text-success">系统正常运行中</span>
          </div>
        </div>
        
        <!-- 用户信息 -->
        <!-- <div class="flex items-center space-x-4">
          <button class="relative text-gray-300 hover:text-white transition-colors">
            <i class="fa fa-bell text-xl"></i>
            <span class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-xs flex items-center justify-center">3</span>
          </button>
          <div class="flex items-center space-x-2">
            <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
            <span class="hidden md:inline font-medium">管理员</span>
          </div>
        </div> -->
      </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
      <!-- 侧边栏导航 -->
      <aside id="sidebar" class="w-64 bg-white border-r border-light-1 flex-shrink-0 hidden md:block transition-all duration-300 ease-in-out z-20">
        <nav class="py-6 h-full flex flex-col">
          <!-- <div class="px-4 mb-6">
            <div class="relative">
              <input type="text" placeholder="搜索..." class="form-input pl-10 bg-dark-lighter text-sm">
              <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
          </div> -->
          
          <ul class="space-y-1 px-2 flex-1 overflow-y-auto scrollbar-hide">
            <li>
              <a href="#" class="sidebar-item active">
                <i class="fa fa-tachometer w-5 text-center mr-3"></i>
                <span>监控概览</span>
              </a>
            </li>
            <li>
              <a href="#" class="sidebar-item">
                <i class="fa fa-desktop w-5 text-center mr-3"></i>
                <span>实时监控</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700/20 text-gray-300 transition-colors">
                <i class="fa fa-list-alt w-5 text-center mr-3"></i>
                <span>事件管理</span>
                <span class="ml-auto bg-danger text-white text-xs px-2 py-1 rounded-full">12</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700/20 text-gray-300 transition-colors">
                <i class="fa fa-bar-chart w-5 text-center mr-3"></i>
                <span>统计分析</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700/20 text-gray-300 transition-colors">
                <i class="fa fa-calendar w-5 text-center mr-3"></i>
                <span>录像回放</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-700/20 text-gray-300 transition-colors">
                <i class="fa fa-cog w-5 text-center mr-3"></i>
                <span>系统设置</span>
              </a>
            </li>
          </ul>
          
          <!-- 系统信息 -->
          <!-- <div class="mt-auto px-4 py-4 border-t border-gray-700/30">
            <div class="bg-dark rounded-lg p-3">
              <div class="text-xs text-gray-400 mb-2">系统状态</div>
              <div class="flex items-center justify-between text-sm">
                <span>在线机器人</span>
                <span class="text-success">16/16</span>
              </div>
              <div class="flex items-center justify-between text-sm mt-1">
                <span>存储空间</span>
                <span class="text-warning">78%</span>
              </div>
            </div>
          </div> -->
        </nav>
      </aside>

      <!-- 主内容区域 -->
      <main class="flex-1 overflow-y-auto p-4 md:p-6">
        <!-- 页面标题和控制区 -->
        <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
          <div>
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-white">视频监控中心</h2>
            <p class="text-gray-400 mt-1">实时监控画面、事件记录与统计分析</p>
          </div>
          
          <!-- <div class="flex flex-wrap items-center gap-3">
            <div class="relative">
              <select class="bg-dark-light border border-gray-700 rounded-lg py-2 pl-3 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 appearance-none">
                <option>全部机器人</option>
                <option>入口区域</option>
                <option>教学楼区</option>
                <option>办公区</option>
                <option>体育馆区</option>
              </select>
              <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
            </div>
            
            <div class="relative">
              <select class="bg-dark-light border border-gray-700 rounded-lg py-2 pl-3 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 appearance-none">
                <option>今日事件</option>
                <option>昨日事件</option>
                <option>本周事件</option>
                <option>本月事件</option>
                <option>自定义范围</option>
              </select>
              <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
            </div>
            
            <button class="btn btn-primary">
              <i class="fa fa-download mr-2"></i>
              <span>导出报告</span>
            </button>
          </div> -->
        </div>
        
        <!-- 统计卡片 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
          <div class="card">
            <div class="flex items-start justify-between">
              <div>
                <p class="text-gray-400 text-sm">机器人总数</p>
                <h3 class="text-2xl font-bold text-white mt-1">16</h3>
                <p class="text-success text-xs flex items-center mt-2">
                  <i class="fa fa-check-circle mr-1"></i>
                  全部在线
                </p>
              </div>
              <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                <i class="fa fa-video-camera"></i>
              </div>
            </div>
          </div>
          
          <div class="card">
            <div class="flex items-start justify-between">
              <div>
                <p class="text-gray-400 text-sm">今日事件</p>
                <h3 class="text-2xl font-bold text-white mt-1">24</h3>
                <p class="text-warning text-xs flex items-center mt-2">
                  <i class="fa fa-exclamation-circle mr-1"></i>
                  3个需要处理
                </p>
              </div>
              <div class="w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
                <i class="fa fa-bell"></i>
              </div>
            </div>
          </div>
          
          <div class="card">
            <div class="flex items-start justify-between">
              <div>
                <p class="text-gray-400 text-sm">异常事件</p>
                <h3 class="text-2xl font-bold text-white mt-1">5</h3>
                <p class="text-danger text-xs flex items-center mt-2">
                  <i class="fa fa-arrow-up mr-1"></i>
                  较昨日增加2个
                </p>
              </div>
              <div class="w-10 h-10 rounded-lg bg-danger/10 flex items-center justify-center text-danger">
                <i class="fa fa-exclamation-triangle"></i>
              </div>
            </div>
          </div>
          
          <div class="card">
            <div class="flex items-start justify-between">
              <div>
                <p class="text-gray-400 text-sm">存储容量</p>
                <h3 class="text-2xl font-bold text-white mt-1">78%</h3>
                <p class="text-warning text-xs flex items-center mt-2">
                  <i class="fa fa-hdd-o mr-1"></i>
                  剩余空间: 560GB
                </p>
              </div>
              <div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
                <i class="fa fa-database"></i>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 监控画面和事件列表 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
          <!-- 监控画面区域 -->
          <div class="lg:col-span-2">
            <div class="card h-full">
              <div class="flex items-center justify-between mb-4">
                <h3 class="font-bold text-white">实时监控画面</h3>
                <div class="flex space-x-2">
                  <button class="text-gray-400 hover:text-white transition-colors" title="刷新">
                    <i class="fa fa-refresh"></i>
                  </button>
                  <button class="text-gray-400 hover:text-white transition-colors" title="全屏">
                    <i class="fa fa-expand"></i>
                  </button>
                  <button class="text-gray-400 hover:text-white transition-colors" title="设置">
                    <i class="fa fa-cog"></i>
                  </button>
                </div>
              </div>
              
              <!-- 监控机器人网格 -->
              <div class="camera-grid">
                <!-- 机器人1 - 有事件警告 -->
                <div class="card relative overflow-hidden group border-2 border-danger blink-warning">
                  <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/35b57816993a4a3b9223a6026e295244.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1756299762&x-signature=ETUUZvVfhJXFqvBvAM7exJBFUKY%3D" alt="入口监控" class="w-full h-48 object-cover">
                  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
                    <div class="flex items-center justify-between">
                      <span class="text-xs font-medium">入口区域 #01</span>
                      <span class="text-xs bg-danger px-1.5 py-0.5 rounded">移动侦测</span>
                    </div>
                  </div>
                  <div class="absolute top-2 right-2 bg-dark/70 text-xs px-2 py-1 rounded flex items-center">
                    <i class="fa fa-circle text-success text-[8px] mr-1"></i>
                    实时
                  </div>
                  <div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                    <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center mr-2 hover:bg-primary hover:text-white transition-colors">
                      <i class="fa fa-play"></i>
                    </button>
                    <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                      <i class="fa fa-search-plus"></i>
                    </button>
                  </div>
                </div>
                
                <!-- 机器人2 -->
                <div class="card relative overflow-hidden group border border-gray-700/50">
                  <img src="https://picsum.photos/id/1067/640/480" alt="停车场监控" class="w-full h-48 object-cover">
                  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
                    <div class="flex items-center justify-between">
                      <span class="text-xs font-medium">教学楼 #02</span>
                      <span class="text-xs bg-success px-1.5 py-0.5 rounded">正常</span>
                    </div>
                  </div>
                  <div class="absolute top-2 right-2 bg-dark/70 text-xs px-2 py-1 rounded flex items-center">
                    <i class="fa fa-circle text-success text-[8px] mr-1"></i>
                    实时
                  </div>
                  <div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                    <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center mr-2 hover:bg-primary hover:text-white transition-colors">
                      <i class="fa fa-play"></i>
                    </button>
                    <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                      <i class="fa fa-search-plus"></i>
                    </button>
                  </div>
                </div>
                
                <!-- 机器人3 -->
                <!-- <div class="relative rounded-lg overflow-hidden group border border-gray-700/50">
                  <img src="https://picsum.photos/id/1048/640/480" alt="办公区监控" class="w-full h-48 object-cover">
                  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
                    <div class="flex items-center justify-between">
                      <span class="text-xs font-medium">办公区 #03</span>
                      <span class="text-xs bg-success px-1.5 py-0.5 rounded">正常</span>
                    </div>
                  </div>
                  <div class="absolute top-2 right-2 bg-dark/70 text-xs px-2 py-1 rounded flex items-center">
                    <i class="fa fa-circle text-success text-[8px] mr-1"></i>
                    实时
                  </div>
                  <div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                    <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center mr-2 hover:bg-primary hover:text-white transition-colors">
                      <i class="fa fa-play"></i>
                    </button>
                    <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                      <i class="fa fa-search-plus"></i>
                    </button>
                  </div>
                </div> -->
                
                <!-- 机器人4 - 有事件警告 -->
                <!-- <div class="relative rounded-lg overflow-hidden group border-2 border-warning blink-warning">
                  <img src="https://picsum.photos/id/1059/640/480" alt="仓库监控" class="w-full h-48 object-cover">
                  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
                    <div class="flex items-center justify-between">
                      <span class="text-xs font-medium">仓库区 #04</span>
                      <span class="text-xs bg-warning px-1.5 py-0.5 rounded">区域入侵</span>
                    </div>
                  </div>
                  <div class="absolute top-2 right-2 bg-dark/70 text-xs px-2 py-1 rounded flex items-center">
                    <i class="fa fa-circle text-success text-[8px] mr-1"></i>
                    实时
                  </div>
                  <div class="absolute inset-0 bg-primary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                    <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center mr-2 hover:bg-primary hover:text-white transition-colors">
                      <i class="fa fa-play"></i>
                    </button>
                    <button class="bg-white text-dark rounded-full w-10 h-10 flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                      <i class="fa fa-search-plus"></i>
                    </button>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
          
          <!-- 事件列表区域 -->
          <div>
            <div class="card h-full shadow-sm">
              <div class="flex items-center justify-between mb-4">
                <h3 class="font-bold text-white">最新事件</h3>
                <button class="text-gray-400 hover:text-white transition-colors" title="刷新">
                  <i class="fa fa-refresh"></i>
                </button>
              </div>
              
              <div class="space-y-3">
                <!-- 事件1 -->
                <div class="card p-3 border border-danger/30 shadow-sm table-row-hover">
                  <div class="flex items-start justify-between">
                    <div>
                      <h4 class="font-medium text-danger">移动侦测</h4>
                      <p class="text-xs text-gray-400 mt-1">入口区域 #01 - 2分钟前</p>
                    </div>
                    <span class="text-xs bg-danger text-white px-2 py-1 rounded-full">紧急</span>
                  </div>
                  <div class="mt-2 flex items-center space-x-2">
                    <img src="https://picsum.photos/id/100/100/60" alt="事件截图" class="w-16 h-10 object-cover rounded">
                    <div class="text-xs text-gray-400 flex-1">
                      <p>检测到未授权人员进入</p>
                    </div>
                  </div>
                </div>
                
                <!-- 事件2 -->
                <div class="bg-dark rounded-lg p-3 border border-warning/30 table-row-hover">
                  <div class="flex items-start justify-between">
                    <div>
                      <h4 class="font-medium text-warning">区域入侵</h4>
                      <p class="text-xs text-gray-400 mt-1">教学楼 #04 - 15分钟前</p>
                    </div>
                    <span class="text-xs bg-warning text-white px-2 py-1 rounded-full">警告</span>
                  </div>
                  <div class="mt-2 flex items-center space-x-2">
                    <img src="https://picsum.photos/id/101/100/60" alt="事件截图" class="w-16 h-10 object-cover rounded">
                    <div class="text-xs text-gray-400 flex-1">
                      <p>检测到人员进入限制区域</p>
                    </div>
                  </div>
                </div>
                
                <!-- 事件3 -->
                <!-- <div class="bg-dark rounded-lg p-3 border border-success/30">
                  <div class="flex items-start justify-between">
                    <div>
                      <h4 class="font-medium text-success">车辆识别</h4>
                      <p class="text-xs text-gray-400 mt-1">停车场 #02 - 1小时前</p>
                    </div>
                    <span class="text-xs bg-success text-white px-2 py-1 rounded-full">正常</span>
                  </div>
                  <div class="mt-2 flex items-center space-x-2">
                    <img src="https://picsum.photos/id/102/100/60" alt="事件截图" class="w-16 h-10 object-cover rounded">
                    <div class="text-xs text-gray-400 flex-1">
                      <p>车牌号: 京A12345</p>
                    </div>
                  </div>
                </div> -->
                
                <!-- 事件4 -->
                <div class="bg-dark rounded-lg p-3 border border-gray-700/50 table-row-hover">
                  <div class="flex items-start justify-between">
                    <div>
                      <h4 class="font-medium text-gray-300">常规检查</h4>
                      <p class="text-xs text-gray-400 mt-1">办公区 #03 - 2小时前</p>
                    </div>
                    <span class="text-xs bg-gray-600 text-white px-2 py-1 rounded-full">信息</span>
                  </div>
                  <div class="mt-2 flex items-center space-x-2">
                    <img src="https://picsum.photos/id/103/100/60" alt="事件截图" class="w-16 h-10 object-cover rounded">
                    <div class="text-xs text-gray-400 flex-1">
                      <p>保安例行巡逻</p>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="mt-4 text-center">
                <button class="text-primary text-sm hover:underline">查看全部事件</button>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
let currentTime = ref(" 00/00/0000 00:00:00");
onMounted(() => {
  setInterval(() => { 
    currentTime.value = new Date().toLocaleString();
  }, 1000);
});
function handleCameraClick(camera) {
  console.log(camera);
}
function handleEventClick(event) {
  console.log(event);
}
function handleEventDelete(event) {
  console.log(event);
}


</script>

<style scoped>
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .sidebar-item {
    @apply flex items-center gap-3 px-4 py-3 rounded-lg text-dark-2 hover:bg-primary/5 hover:text-primary transition-all duration-200;
  }
  .sidebar-item.active {
    @apply bg-primary/10 text-primary font-medium;
  }
  .card {
    @apply bg-white rounded-xl shadow-card p-5 transition-all duration-300 hover:shadow-card-hover;
  }
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center justify-center gap-2;
  }
  .btn-primary {
    @apply bg-primary text-white hover:bg-primary/90 active:bg-primary/80;
  }
  .btn-secondary {
    @apply bg-white border border-dark-3 text-dark-2 hover:bg-light-1 active:bg-light-2;
  }
  .form-input {
    @apply w-full px-3 py-2 border border-dark-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all;
  }
  .table-row-hover {
    @apply hover:bg-light-1 transition-colors;
  }
  .camera-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes blink {
  0%, 100% {
    border-color: transparent;
  }
  50% {
    border-color: theme('colors.danger');
  }
}
</style>